<template>
  <div class="full relative bgc_212121" id="screen" ref="screen">
    <!-- 全屏 icon -->
    <!-- <div class="w_25 h_25 absolute top_20 right_20 z_99999" @click="handleClickFullIcon()">
      <img class="full cursor" v-if="isFullscreen" src="../assets/images/icon/qu-xiao-quan-ping.png" alt="">
      <img class="full cursor" v-if="!isFullscreen" src="../assets/images/icon/quan-ping.png" alt="">
    </div> -->

    <!-- threejs 3d 大屏 -->
    <div class="full absolute top_0 left_0 z_-1">
      <ThreejsMap @chick3DMap="chick3DMap" />
    </div>

    <!-- Header -->
    <div class="w_full h_60 lh_50 absolute top_0 left_0">
      <!-- 日期 -->
      <div class="w_30_p h_40 absolute left_30 top_center color_fff maon_border">{{ time }}</div>
      <Header :headerName="headerName" :headerStyle="headerStyle" />
    </div>

    <!-- 1 -->
    <div class="w_25_p h_full-70 absolute top_60 left_20 flex_column_between gap_10">
      <!-- 1-1 -->
      <div class="w_full h_33_p p_10 box_bgi">
        <DataChart title="2019-2023年农林牧渔总产值" ref="chart1" path="" chartType="柱状图3" :chartData="chartData1" filterText=""
          filterId="" :filterList="[]" :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>

      <!-- 1-2 -->
      <div class="w_full h_33_p p_10 box_bgi">
        <DataChart title="农林牧渔业总产值 41.7" path="" chartType="柱状图3" :chartData="chartData2" filterText="" filterId=""
          :filterList="[]" :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>

      <!-- 1-3 -->
      <div class="w_full h_33_p p_10 box_bgi">
        <DataChart title="粮食作物播种产量" path='' chartType="双柱图" :chartData="chartData3" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>

      <!-- 农牧业机械拥有量 -->
      <!-- <div class="w_full h_20_p p_10 box_bgi">
        <div class="w_full chart_title pb_5">农牧业机械拥有量</div>
        <div class="w_full flex_column_around gap_10 pt_10 ph_20">
          <div class="w_full flex_row_between pb_5 color_fff" v-for="(item, index) in jiXieData" :key="index">
            <div>{{ item.name }}</div>
            <div v-for="(data, index_data) in item.children" :key="index_data">
              <div v-if="data.totalCount"> {{ data.name.substring(0, data.name.length - 4) + " : " + data.totalCount +
                data.name.substring(data.name.length - 4).replace('（', ' ').replace('）',
                  '') }}</div>
            </div>
          </div>
        </div>
      </div> -->
    </div>

    <!-- 2 -->
    <div class="w_50_p absolute top_60 left_center flex_row_start gap_10 main_color">

    </div>

    <!-- 3 -->
    <div class="w_25_p h_full-70 absolute top_60 right_20 flex_column_between gap_10">
      <!-- 3-1 -->
      <div class="w_full h_25_p p_10 box_bgi">
        <div class="w_full chart_title pb_5">气象资料</div>
        <div id="listBox" class="w_full h_full-30 flex_column_around pt_10 ph_20 gap_10 scroll_box" ref="list_box">
          <div class="w_full flex_row_between pb_5 color_fff" v-for="(item, index) in qiXiangData" :key="index">
            <div>{{ item.name.substring(0, item.name.length - 3).replace('(', '') }}</div>
            <div>{{ item.totalCount + ' ' + item.name.substring(item.name.length - 3).replace('(', '').replace(')',
              '') }}</div>
          </div>
        </div>
      </div>

      <!-- 3-2 -->
      <div class="w_full h_25_p p_10 box_bgi">
        <DataChart title="全年降水量 (毫米)" path="" chartType="线型图" :chartData="chartData3" filterText="" filterId=""
          :filterList="[]" :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>

      <!-- 3-3 -->
      <div class="w_full h_25_p p_10 box_bgi">
        <DataChart title="年末牲畜存栏头数" path="/fangYiPage" chartType="柱状图" :chartData="chartData4" filterText="" filterId=""
          :filterList="[]" :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
      </div>

      <!-- 3-4 -->
      <div class="w_full h_25_p p_10 box_bgi">
        <!-- <DataChart title="林草、种草情况" chartType="3d-pie" /> -->

        <div class="w_full h_25 chart_title pb_5">林草、种草情况</div>
        <div class="w_full h_full-25 flex_column_around pt_10 ph_20 scroll_box">
          <div class="w_full flex_row_between color_fff" v-for="(item, index) in linCaoData" :key="index">
            <div v-show="item.totalCount">{{ item.name.substring(0, item.name.length - 7) }}</div>
            <div v-show="item.totalCount">{{ item.totalCount + ' 公顷' }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import Header from '../common/Header.vue'
import ThreejsMap from '../common/3d-map/index.vue'
import DataChart from '../components/data-chart/index.vue'
import { ref, reactive, computed, onMounted, onUnmounted, watch, provide, nextTick } from 'vue'
import screenfull from 'screenfull'

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const headerName = ref('乌审旗农牧大数据平台')
const headerStyle = reactive({
  color: '#fff',
  fontWeight: 600,
  fontSize: '24px'
})

let scroll_timer = null
let scroll_index = 0

let timer = null
let time = ref(null)

const nongChanData = ref([])
const jiXieData = ref([])
const qiXiangData = ref([])
const linCaoData = ref([])
const fangYiData = ref([])
const fangYiYuanCount = ref(0)
const yiMiaoCount = ref(0)

const chart1Title = ref('')
const chart2Title = ref('')
const chart3Title = ref('')
const chart4Title = ref('')

const chartData1 = reactive({})
const chartData2 = reactive({})
const chartData3 = reactive({})
const chartData4 = reactive({})

const window_width = window.innerWidth
const window_height = window.innerHeight

const screen = ref()
const isFullscreen = ref(false)

const activeProjectItem = reactive({
  id: '',
  itemCode: ''
})
const projectList = ref([])
const agriProTotalOutputData = ref([])

onMounted(async () => {
  scroll_timer = null
  if (scroll_timer) {
    clearInterval(scroll_timer)
    scroll_timer = null
  }
  showCurentTime()

  initChartData()
})

onUnmounted(() => {
  clearInterval(scroll_timer)
  scroll_timer = null
  scroll_index = 0
})

function initChartData() {
  chartData1.unit = '亿元'
  chartData1.x = ['2019', '2020', '2021', '2022', '2023']
  chartData1.y = [27.12, 30.02, 32.85, 40.58, 41.70]

  chartData2.unit = '亿元'
  chartData2.x = ['渔业', '林业', '牧业', '农业']
  chartData2.y = [0.3, 0.8, 18.9, 20.5]

  chartData3.x = ['2019', '2020', '2021', '2022', '2023']
  chartData3.data1 = {
    name: '粮食作物总产量（万吨）',
    data: [19.1, 24.08, 24.1, 26.0, 26.7]
  }
  chartData3.data2 = {
    name: '粮食作物播种面积（万亩）',
    data: [50.7, 61.6, 73.1, 64.0, 65.2]
  }
}

// 全屏
function handleClickFullIcon() {
  const element = document.getElementById('screen');//指定全屏区域元素

  // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
  if (!screenfull.isEnabled) {
    ElMessage({
      message: '浏览器不能全屏，安装其他版本试试',
      type: 'warning',
      duration: 1 * 1000
    })
    return false
  }

  isFullscreen.value = !isFullscreen.value
  screenfull.request(element)
  // 调用 screenfull.toggle() 可以双向切换全屏与非全屏
  screenfull.toggle()
}

// 点击 地图块
function chick3DMap(mapName) {
  // router.push(`/townPage/${mapName}`)
  router.push({
    path: '/townPage',
    query: { mapName }
  })
}

// 显示当前时间
function showCurentTime() {
  timer = setInterval(() => { time.value = curentTime() }, 1000)
}

// 格式化时间
function curentTime() {
  var now = new Date();

  var year = now.getFullYear();       //年
  var month = now.getMonth() + 1;     //月
  var day = now.getDate();            //日

  var hh = now.getHours();            //时
  var mm = now.getMinutes();          //分
  var ss = now.getSeconds();           //秒

  var clock = year + "-";

  if (month < 10)
    clock += "0";

  clock += month + "-";

  if (day < 10)
    clock += "0";

  clock += day + " ";

  if (hh < 10)
    clock += "0";

  clock += hh + ":";
  if (mm < 10) clock += '0';
  clock += mm + ":";

  if (ss < 10) clock += '0';
  clock += ss;

  return (clock);
}

function scrollData(list) {
  if (scroll_timer) {
    clearInterval(scroll_timer)
    scroll_timer = null
    scroll_index = 0
  }

  let count = 2

  scroll_timer = setInterval(() => {
    if (scroll_index < list.length - 1) {
      if (scroll_index == 0) {
        if (count > 0) {
          count--
        } else {
          count = 2
          scroll_index++
          autoAcroll(scroll_index)
        }
      } else {
        scroll_index++
        autoAcroll(scroll_index)
      }
    } else {
      scroll_index = 0
      autoAcroll(scroll_index)
    }
  }, 1000 * 2)
}

function autoAcroll(index) {
  let listBox = document.getElementById("listBox")
  if (listBox) {
    listBox.scrollTo({ top: index * 27, behavior: 'smooth' })
  }

  // if (list_box.value) {
  //   list_box.value.scrollTo(0, index * 30)
  // }
}

</script>

<style>
.box_bgi {
  /* width: 100%;
  height: 100%; */
  /* border: 1px solid #f00; */
  position: relative;
}
</style>